<template>
    <div class="Hello">
        <el-dialog title="修改用户信息" :visible.sync="dialogEdit.show">
            <el-form :model="editData" ref="formEdit" label-width="100px" :rules="formrules">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="editData.username"></el-input>
                </el-form-item>
                <el-form-item label="个人签名" prop="introduction">
                    <el-input v-model="editData.introduction"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="editData.password"></el-input>
                </el-form-item>
                <!-- <el-form-item label="用户账号" prop="user">
                    <el-input v-model="Data.userId"></el-input>
                </el-form-item> -->
                <el-form-item label="用户手机号" prop="phone">
                    <el-input v-model="editData.phone"></el-input>
                </el-form-item>
                <el-form-item label="用户邮箱" prop="email">
                    <el-input v-model="editData.email"></el-input>
                </el-form-item>
                <el-form-item label="用户权限" prop="role">
                    <el-input v-model="editData.role"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click=cancel>取消</el-button>
                <el-button type="primary" @click="confirm">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { senduser } from '@/api/form'

export default {
    props: {
        dialogEdit: Object,
        editData: Object,
    },
    data() {
        return {
            formrules: {
                username: [{ required: true, message: "用户名不能为空！", trigger: "blur" }],
                email: [{ required: true, message: "邮箱不能为空！", trigger: "blur" },
                { type: "email", message: "请输入有效的邮箱", trigger: ["blur", "change"] }],
                role: [{ required: true, message: "用户权限不能为空！", trigger: "blur" }],
            }
        }
    },
    methods: {
        cancel() {
            this.dialogEdit.show = false;
            this.resetForm();
        },
        confirm() {
            this.$refs.formEdit.validate((valid) => {
                if (valid) {
                    // 发送更新用户信息的请求到后端
                    senduser(this.editData)
                        .then((response) => {
                            // 处理成功的响应
                            this.$message('用户信息修改成功！');
                            this.dialogEdit.show = false;
                            this.resetForm();
                            // 触发父组件事件，传递修改后的用户信息
                            this.$emit('editUser', { ...this.editData });
                        })
                        .catch((error) => {
                            // 处理错误的响应
                            this.$message.error('用户信息修改失败！');
                            console.log(error);
                        });
                }
            });
        },
        resetForm() {
            this.$refs.formEdit.resetFields();
        },
    }
}
</script>

<style scoped></style>